<template>
    <div class="sys">
        <span class="msg"> {{username}} {{actionname}} 了聊天室. </span>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                username: this.msg.username,
                actionname: ''
            };
        },
        props: [
            'msg'
        ],
        computed: {
            actionname() {
                return this.msg.action == 'join' ? '加入' : '退出';
            }
        }
    };
</script>

<style scoped>
    .sys {
        text-align: center;
        font-size: 10px;
    }

    .msg {
        background-color: #dcdcdc;
        padding: 6px;
        border-radius: 6px;
    }
</style>
